/*
 * @Author: szx
 * @Date: 2022-07-01 15:43:09
 * @LastEditTime: 2022-07-05 16:42:32
 * @Description: 头部，包括图标等等
 * @FilePath: \link_jump\src\components\Header.tsx
 */
import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, Linking } from 'react-native';
import logoImg from '../assets/images/logo/logo.png';
import impoIcon from '../assets/icons/impo.png';

interface HeaderProps {
  tasksCounter: number;
  importLink: () => void;
}

export function Header({ tasksCounter, importLink }: HeaderProps) {
  function handleImportLink() {
    importLink();
  }

  function handleOpenGitee() {
    Linking.openURL('https://gitee.com/xaotuman/link-jump');
  }
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => handleOpenGitee()}>
        <Image source={logoImg} />
      </TouchableOpacity>

      <TouchableOpacity style={styles.tasks} onPress={() => handleImportLink()}>
        <Text style={styles.tasksCounter}>导入 </Text>
        <Image source={impoIcon} />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    paddingHorizontal: 24,
    paddingBottom: 70,
    backgroundColor: '#0267C1',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row'
  },
  tasks: {
    alignItems: 'center',
    flexDirection: 'row'
  },
  tasksCounter: {
    fontSize: 15,
    color: '#FFF'
  }
});
